import React, { useState, useEffect } from 'react'
import { getArticleList, delArticleById } from '../api/ARTList'
import { getTypeList } from '../api/ARTAdd'
import { Row, Col, Table, Tag, Select, Modal, Button, message } from 'antd'
import { EyeOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
const { Option } = Select
const { Column } = Table
const { confirm } = Modal

function ARTList(props) {
  const [articleList, setArticleList] = useState([])
  const [articleType, setArticleType] = useState(0)
  const [articleStatus, setArticleStatus] = useState(1)
  const [articleTypeList, setArticleTypeList] = useState([])
  const [tableLoading, setTableLoading] = useState(false)

  useEffect(() => {
    getArtList(articleType, articleStatus)
    typeList()
  }, [articleStatus, articleType])

  // 列表操作
  const handleClick = (type, id) => {
    if (type === 'edit') props.history.push('/console/artAdd/' + id)
    if (type === 'del') {
      confirm({
        title: '您要删除此篇文章吗?',
        icon: <ExclamationCircleOutlined />,
        content: '',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          delArticleById({ id })
            .then((res) => {
              // console.log(res)
              message.success('删除成功')
              getArtList(articleType, articleStatus)
            })
            .catch((err) => {
              console.log(err)
              message.error('删除失败')
            })
        },
        onCancel() {
          message.warning('取消删除')
        }
      })
    }
    if (type === 'view') {
      window.open('http://www.codemobile.cn/detail?id=' + id)
    }
  }

  // 获取内容列表
  const getArtList = (type_id, status) => {
    setTableLoading(true)
    getArticleList(type_id, status)
      .then((res) => {
        setTableLoading(false)
        const { list } = res
        let newList = []
        list.forEach((element, index) => {
          newList.push({
            id: element.id,
            title: element.title,
            type: element.type,
            addTime: element.addTime,
            updateTime: element.updateTime,
            viewCount: element.view_count,
            status: element.status
          })
        })
        setArticleList(newList)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  // 获取类别列表
  const typeList = () => {
    getTypeList()
      .then((res) => {
        setArticleTypeList(res.list)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  // 修改文章类别
  const changeType = (value) => {
    // console.log(value)
    setArticleType(value)
    getArtList(value, articleStatus)
  }
  // 修改文章状态
  const changeStatus = (value) => {
    setArticleStatus(value)
    getArtList(articleType, value)
  }

  return (
    <div>
      <Row gutter={5} style={{ marginBottom: '10px' }}>
        <Col span={4}>
          <Select style={{ width: '100%' }} defaultValue={articleType} onSelect={changeType}>
            <Option key={-1} value={0}>
              全部类别
            </Option>
            {articleTypeList.map((item, index) => (
              <Option key={index} value={item.id}>
                {item.typeName}
              </Option>
            ))}
          </Select>
        </Col>
        <Col span={4}>
          <Select style={{ width: '100%' }} defaultValue={articleStatus} onSelect={changeStatus}>
            <Option key={1} value={-1}>
              全部文章
            </Option>
            <Option key={2} value={1}>
              已发布
            </Option>
            <Option key={3} value={0}>
              草稿
            </Option>
            <Option key={4} value={2}>
              已删除
            </Option>
          </Select>
        </Col>
      </Row>
      <Row gutter={5}>
        <Col span={24}>
          <Table
            dataSource={articleList}
            size='middle'
            bordered
            loading={tableLoading}
            rowKey={(record, index) => index}
            pagination={false}>
            <Column title='标题' dataIndex='title' key='title' />
            <Column title='分类' dataIndex='type' key='type' />
            <Column title='添加时间' dataIndex='addTime' key='addTime' />
            <Column title='最后修改时间' dataIndex='updateTime' key='updateTime' />
            <Column title='浏览量' dataIndex='viewCount' key='viewCount' />
            <Column
              title='状态'
              dataIndex='status'
              key='status'
              render={(status) => {
                let color = 'gold'
                let txt = '草稿'
                if (status === 1) {
                  color = 'green'
                  txt = '已发布'
                }
                if (status === 2) {
                  color = 'red'
                  txt = '已删除'
                }
                return (
                  <span>
                    <Tag color={color} key={status} size='small'>
                      {txt}
                    </Tag>
                  </span>
                )
              }}
            />
            <Column
              title='操作'
              dataIndex='operate'
              key='operate'
              render={(text, record) => (
                <span style={{ fontSize: '1rem' }}>
                  <EyeOutlined
                    onClick={handleClick.bind(this, "view", record.id)}
                    title="浏览"
                    style={{
                      color: "#67C23A",
                      margin: "0 6px",
                      cursor: "pointer",
                      display: record.status === 2 ? 'none' : ''
                    }} />
                  <EditOutlined
                    onClick={handleClick.bind(this, 'edit', record.id)}
                    title='编辑'
                    style={{ color: '#E6A23C', margin: '0 6px', cursor: 'pointer' }}
                  />
                  <DeleteOutlined
                    onClick={handleClick.bind(this, 'del', record.id)}
                    title='删除'
                    style={{
                      color: '#F56C6C',
                      margin: '0 6px',
                      cursor: 'pointer',
                      display: record.status === 2 ? 'none' : ''
                    }}
                  />
                </span>
              )}
            />
          </Table>
        </Col>
      </Row>
      <Row gutter={5}></Row>
    </div>
  )
}
export default ARTList
